<template>
  <el-container id="login">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="rulesLoginForm"
      label-width="80px">
    <!--头像区域-->
    <div class="avatar_box">
        <img src="../assets/img/mjulogo.png" alt="">
    </div>
        <el-form-item
            label="用户名称"
            prop="username"
        >
            <el-input
                prefix-icon="el-icon-user-solid"
                v-model="loginForm.username"
                clearable
            />
        </el-form-item>
        <el-form-item
            label="用户密码"
            prop="password">
            <el-input
                prefix-icon="el-icon-c-scale-to-original"
                v-model="loginForm.password"
                show-password
                clearable
            />
        </el-form-item>
        <el-form-item
            label="用户身份"
            prop="type">
            <el-select
                prefix-icon="el-icon-d-caret"
                v-model="loginForm.type"
                placeholder="请选择用户身份"
                style="width: 100%"
            >
                <el-option label="管理员" value="0"></el-option>
                <el-option label="企业" value="1"></el-option>
                <el-option label="学生" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item
            label="验证码"
            prop="code"
        >
            <el-input
                v-model="loginForm.code"
                placeholder="点击图片更换验证码"
                style="width: 160px;margin-right: 20px;float: left"
                clearable
            />
            <img :src="captchaUrl" @click="updateCaptcha">
        </el-form-item>
        <el-form-item size="large">
            <el-button
                ref="loginButton"
                type="primary"
                @click="submitForm"
                style="float: left"
            >
                登录
            </el-button>
            <el-button @click="create">
                重置
            </el-button>
        </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
import Vue from 'vue'
import {setCookie,getCookie} from '../util/cookisUtil'
import utils from '../util/util'

export default {
  name: 'Login',
  data () {
    return {
      captchaUrl:'/kaptcha?date='+new Date().getTime(),
      loginForm: {
        username: '',
        password: '',
        type: '',
        code: ''
      },
      // 长度校验
      rulesLoginForm: {
        username: [
          { required: true, message: '请输入账户名称', trigger: 'blur' },
          { min: 5, max: 21, message: '长度在 5 到 21 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入账户密码', trigger: 'blur' },
          { min: 5, max: 21, message: '长度在 5 到 21 个字符', trigger: 'blur' }
        ],
        type: [
        {
            required: true,message: '请选择用户身份',trigger: 'blur'
        }
        ],
        code:[
        {
            required: true, message:'请输入验证码',trigger: 'blur'
        }
        ]
      }
    }
  },
  // 方法绑定
  methods: {
    // 表单提交方法
    submitForm () {
      // 设置按钮状态
      var self = this;
      const message = this.$message
      const route = this.$router
      let data = this.loginForm;
      this.$refs.loginForm.validate(async valid => {
        let loginButton = self.$refs.loginButton
        // 判断是否合法
        if (valid) {
          loginButton.loading = true
          // 提交表单
          this.utils.sendReq({
              queryUrl: '/login',
              req: {
                  method: 'post',
                  data: JSON.stringify({
                      "username" : data.username,
                      "password" : data.password,
                      "type" : data.type,
                      "code" : data.code
                  }),
                  success: function (res) {
                      if (res.data.code === 200){
                          loginButton.loadinding = false;
                          const tokenStr = res.data.data.tokenHead + " "+ res.data.data.token;
                          window.sessionStorage.setItem('token',tokenStr);
                          message({ message: res.data.msg, type: 'success', showClose: true, center: true })
                          route.push('/admin')
                      }else if (res.data.code === 400){
                          loginButton.loading = false
                          self.updateCaptcha();
                          message({ message: res.data.msg, type: 'error', showClose: true, center: true })
                      }
                  },error: function(res) {
                      loginButton.loading = false
                      self.updateCaptcha();
                      message({ message: "接口请求失败请稍后再试", type: 'error', showClose: true, center: true })
                  }
              }
          })
          // const result = await this.$http.post('/login', user)
          // if (result.data.code === 200) {
          //   loginButton.loading = false
          //   // 登录成功保存用户账号
          //   // window.sessionStorage.setItem('username', this.loginForm.username)
          //   // window.sessionStorage.setItem('is_super', result.data.is_super)
          //   message({ message: result.data.data.msg, type: 'success', showClose: true, center: true })
          //   route.push('/admin')
          // } else if (result.data.code === 400) {
          //   loginButton.loading = false
          //   message({ message: result.data.data, type: 'error', showClose: true, center: true })
          // }
        }
      })
    },
    updateCaptcha(){
        let date = new Date().getTime();
        this.captchaUrl = "/kaptcha?date="+date;
    },
    create(){
        this.loginForm = '';
    }
  }
}
</script>

<style lang="less" scoped>
  .el-form {
    padding: 50px;
    /*background-color: white;*/
    background-color: rgba(255, 255, 255, 0.47);
    margin: 0 auto;
    width: 360px;
    height: 330px;
    margin-top: 50px;
    color: #333;
    text-align: center;
    line-height: 180px;
    border-radius: 30px;
    transform: translate(0%,27%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    > div {
      margin: 28px 0;
    }
  }
  .avatar_box{
      height: 95px;
      width: 95px;
      border-radius: 50%;
      border: 1px solid #eeeeee;
      padding: 3px;
      box-shadow: 0 0 10px #dddddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%,-123%);
      background-color: #ffffff;
      img{
          height: 100%;
          width: 100%;
          border-radius: 50%;
          background-color: #eeeeee;
      }
  }

  #login {
    height: 100%;
    background: url('../assets/img/bg-1.jpg') no-repeat 0px;
    background-size: 100%;
  }
</style>
